﻿<UserControl
    x:Class="Daphne.ControlsMetro.Clock.DigitalClock"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Daphne.ControlsMetro.Clock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="666"
    d:DesignWidth="1000">
    <UserControl.Resources>
        <LinearGradientBrush x:Key="uxBackground">
            <GradientStop Color="#a06444" Offset="0" />
            <GradientStop Color="#643c20" Offset="1" />
        </LinearGradientBrush>
    </UserControl.Resources>

    <Border BorderThickness="20" CornerRadius="20" BorderBrush="#5a3825" Padding="40" Background="{StaticResource uxBackground}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
        
            <!-- Minutes -->
            <local:DigitalNumber x:Name="uxMinutesFirst" Grid.Column="0" Grid.Row="0" />
            <local:DigitalNumber x:Name="uxMinutesSecond" Grid.Column="1" />
        
            <!-- Separator -->
            <Grid Grid.Column="2" Margin="{Binding Path=Margin, ElementName=uxMinutesFirst}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                </Grid.RowDefinitions>           
            
                <Border Grid.Row="0" Width="40" Height="40" VerticalAlignment="Center" Background="{Binding Path=ForegroundOn, ElementName=uxMinutesFirst}"  />
                <Border Grid.Row="1" Width="40" Height="40" VerticalAlignment="Center" Background="{Binding Path=ForegroundOn, ElementName=uxMinutesFirst}"  />
            </Grid>

            <!-- Seconds -->
            <local:DigitalNumber x:Name="uxSecondsFirst" Grid.Column="3" />
            <local:DigitalNumber x:Name="uxSecondsSecond" Grid.Column="4" />
        </Grid>
    </Border>
</UserControl>
